﻿<template>
	<div class="busProduct-container">
		<el-dialog v-model="isShowDialog" :title="props.title" :width="700" draggable="">
			<el-form :model="ruleForm" ref="ruleFormRef" size="default" label-width="100px" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="物料编码" prop="productCode">
							<el-input v-model="ruleForm.productCode" 
								placeholder="请输入物料编码" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="物料名称" prop="productName">
							<el-input v-model="ruleForm.productName" placeholder="请输入物料名称" clearable />
						</el-form-item>
					</el-col>

					<el-divider border-style="dashed" content-position="center">
						<div style="color: #b1b3b8">物料分类</div>
					</el-divider>
					<el-col :xs="24" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
						<el-button icon="ele-Plus" type="primary" plain @click="addProductCateRow"> 增加物料分类</el-button>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<template v-if="productCateRowList && productCateRowList.length > 0">
							<el-row :gutter="35" v-for="(v, k) in productCateRowList" :key="k">
								<el-col :xs="24" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
									<el-form-item label="物料分类"
										:rules="[{ required: true, message: `物料分类不能为空`, trigger: 'blur' }]">
										<template #label>
											<el-button icon="ele-Delete" type="danger" circle plain size="small"
												@click="deleteProductCateRow(k)" />
										</template>
										<el-col :xs="24" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
											<el-form-item label="物料分类">
												<BaseSelectItem placeholder="请选择分类" v-model="v.value"
													:options="busCategoryDropdownList" />
											</el-form-item>
										</el-col>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<el-empty :image-size="30" description="空数据" v-else></el-empty>
					</el-col>

					<el-divider border-style="dashed" content-position="center">
						<div style="color: #b1b3b8">物料属性</div>
					</el-divider>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-button icon="ele-Plus" type="primary" plain @click="addProductAttributeRow"> 增加物料属性</el-button>
					</el-col>
					<el-col :xs="36" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
						<template v-if="productAttrList && productAttrList.length > 0">
							<el-row :gutter="35" v-for="(v, k) in productAttrList" :key="k">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
									<el-form-item label="物料属性"
										:rules="[{ required: true, message: `物料分类不能为空`, trigger: 'blur' }]">
										<template #label>
											<el-button icon="ele-Delete" type="danger" circle plain size="small"
												@click="deleteProductAttributeRow(k)" />
										</template>
										<el-col :xs="24" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
											<el-form-item label="物料属性">
												<BaseSelectItem placeholder="请选择物料属性" v-model="v.value"
													:options="busAttributeDropdownList"
													@change="getBusGoodsAttributeDropdownValue" />
											</el-form-item>
										</el-col>
										<el-col :xs="24" :sm="36" :md="36" :lg="36" :xl="36" class="mb20">
											<el-form-item label="物料属性值">
												<multipleSelect ref="multiple" aria-selected="true" placeholder="请选择物料属性值"
													v-model="v.aValueId" :options="BusGoodsAttributeDropdownValueList"
													@change="getvalue"/>
											</el-form-item>
										</el-col>
									</el-form-item>
								</el-col>
							</el-row>
						</template>
						<el-empty :image-size="30" description="空数据" v-else></el-empty>
					</el-col>

					<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="分类标识" prop="categoryId">
              <el-select clearable filterable v-model="ruleForm.categoryId" multiple  placeholder="请选择物料分类">
                <el-option v-for="(item,index) in busCategoryDropdownList" :key="index" :value="item.value" :label="item.label" />

              </el-select>

            </el-form-item>

          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="属性Id" prop="aId">
              <el-select clearable filterable v-model="ruleForm.aId" multiple placeholder="请选择属性">
                <el-option v-for="(item,index) in busAttributeDropdownList" :key="index" :value="item.value" :label="item.label" />

              </el-select>

            </el-form-item>

          </el-col> -->
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel" size="default">取 消</el-button>
					<el-button type="primary" @click="submit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue';
import { storeToRefs } from 'pinia';
import { useBusProduct } from '/@/stores/busProduct';

import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import BaseSelectItem from '/@/components/BaseSelect/index.vue';
import multipleSelect from '/@/components/BaseSelect/multipleSelect.vue';
import { getDictDataList } from '/@/api/system/admin';
import { getBusAttributeDropdown, getBusCategoryDropdown } from '/@/api/main/busProduct';
import { getProductCateList, getProductAttriList } from '/@/api/main/busProduct';
import { addBusProduct, updateBusProduct } from '/@/api/main/busProduct';
import { productAttributeEffect, productCateRowEffect } from '/@/api/main/BusProducteditDialog';
import { BusGoodsAttributeDropdownValue } from '/@/api/main/busGoods';
import { tr } from 'element-plus/es/locale';

const multiple=ref();
const getEditisDeleteData = ref<any>([]);
//父级传递来的参数
var props = defineProps({
	title: {
		type: String,
		default: '',
	},
	productCode: {
		type: String,
		default: '',
	},
});
//父级传递来的函数，用于回调
const emit = defineEmits(['reloadTable']);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({});

// 打开弹窗
const openDialog = async (row: any, isUpdate: any) => {
	// productAttrList.value.length = 0;
	// productCateRowList.value.length = 0;
	if (isUpdate == "1") {
		ruleForm.value = JSON.parse(JSON.stringify(row));
		console.log(JSON.parse(JSON.stringify(row)));
	}
	isShowDialog.value = true;
	//BusGoodsAttributeDropdownValueList.value=[];
};

// 关闭弹窗
const closeDialog = () => {
	emit('reloadTable');
	isShowDialog.value = false;
	productAttrList.value.length = 0;
	productCateRowList.value.length = 0;
};

// 取消
const cancel = () => {
	isShowDialog.value = false;
	productAttrList.value.length = 0;
	productCateRowList.value.length = 0;
};



// 物料分类集合
const GetProductCateList = ref<any>([]);
const getProductCateLst = async (value: any) => {
	let list = await getProductCateList({ p1: value });
	GetProductCateList.value = list.data.result ?? [];
};

//物料属性集合
const GetProductAttriList = ref<any>([]);
const getProductAttriLst = async (value: any) => {
	let list = await getProductAttriList({ p1: value });
	GetProductAttriList.value = list.data.result ?? [];
};

const dictTypeDataList = async (val: any) => {
	let list = await getDictDataList(val);
	return list.data.result ?? [];
};

const busCategoryDropdownList = ref<any>([]);
const getBusCategoryDropdownList = async () => {
	busCategoryDropdownList.value = [];
	let list = await getBusCategoryDropdown();
	busCategoryDropdownList.value = list.data.result ?? [];
};
const busAttributeDropdownList = ref<any>([]);
const getBusAttributeDropdownList = async () => {
	busAttributeDropdownList.value = [];
	let list = await getBusAttributeDropdown();
	busAttributeDropdownList.value = list.data.result ?? [];
};

const BusGoodsAttributeDropdownValueList = ref<any>([]);
const getBusGoodsAttributeDropdownValue = async (value: any) => {
	BusGoodsAttributeDropdownValueList.value = [];
	let list = await BusGoodsAttributeDropdownValue({ p1: value });
	BusGoodsAttributeDropdownValueList.value = list.data.result ?? [];
}

getBusCategoryDropdownList();
getBusAttributeDropdownList();
getBusGoodsAttributeDropdownValue(null);

// 页面加载时
onMounted(async () => {

	getEditisDeleteData.value = await dictTypeDataList('data_yes_no');
});

const store = useBusProduct();
const { productAttrList, productCateRowList } = storeToRefs(store);

const { addProductCateRow, deleteProductCateRow } = productCateRowEffect();
const { addProductAttributeRow, deleteProductAttributeRow } = productAttributeEffect();

const aId = ref<any>([]);
const avalue = ref<any>([]);
const getvalue = (val: any) => {
	avalue.value = val;
	//  let [id,name] = val.split(',')
	//  console.log(val,"dsasf");
	//  productAttrList.value.forEach((item: any) => aId.value.push({aId:item.value,aValues:val}));//
	//  console.log(aId.value,"aid");
}
// 提交
const submit = async () => {

	const categoryId = ref<any>([]);
	// const avalues=ref<any>([]);

	// console.log(productAttrList.value,"productAttrList");
	productCateRowList.value.forEach((item: any) => categoryId.value.push(item.value));
	productAttrList.value.forEach((item: any) => aId.value.push({ aId: item.value, aValues: item.aValueId }));//
	// avalue.value.forEach((item: any) => aId.value.push({aValues:item}));

	//console.log(aId.value, "aid");
	// console.log(avalues.value,"avalues");

	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			if (ruleForm.value.id != undefined && ruleForm.value.id > 0) {
				await updateBusProduct({
					id: ruleForm.value.id,
					productCode: ruleForm.value.productCode,
					productName: ruleForm.value.productName,
					categoryId: categoryId.value,
					attriValue: aId.value,
				});
			} else {
				await addBusProduct({
					productCode: ruleForm.value.productCode,
					productName: ruleForm.value.productName,
					categoryId: categoryId.value,
					// aId: aId.value,
					attriValue: aId.value,
				});
			}
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: 'error',
			});
		}
	});
};

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>

<style>
.el-form-item__label {
	width: 100px !important;
}

.mb20 {
	padding: auto !important;
}
</style>
